<template>
  <el-container class="sum" style="width: 100vw;height: 100vh;top: 0;left: 0;">
    <el-aside width="11.25rem">
      <div class="title">远程监控系统</div>
      <el-menu router
      :default-active="activeMenu"
      :default-openeds="['submenu1']"
      class="el-menu-vertical-demo"
      background-color="#2b2f3a"
      text-color="#fff"
      active-text-color="#409EFF">
      <!-- <el-menu-item index="1">
      <i class="el-icon-setting"></i>
      <router-link :to="{path:'/home/userinfo',query:{name:'用户信息'}}">用户信息</router-link>
      </el-menu-item> -->
        <el-menu-item index="/index">
          <i class="el-icon-s-platform"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item index="/bake">
          <i class="el-icon-monitor"></i>
          <span slot="title">烘烤</span>
        </el-menu-item>
        <el-menu-item index="/welding">
          <i class="el-icon-monitor"></i>
          <span slot="title">封口焊</span>
        </el-menu-item>
        <el-menu-item index="/detection">
          <i class="el-icon-monitor"></i>
          <span slot="title">二次氦检</span>
        </el-menu-item>
        <el-menu-item index="/alarmhistory">
          <i class="el-icon-data-analysis"></i>
          <span slot="title">报警信息</span>
        </el-menu-item>
        <el-menu-item index="/alarmhistory1">
          <i class="el-icon-data-analysis"></i>
          <span slot="title">报警信息(清洗)</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container class="rightarea">
      <el-divider class="a"></el-divider>
      <el-header>
        <TopNav @update-active="updateActiveMenu" />
        <TopRole />
      </el-header>
      <el-divider class="b"></el-divider>
      <alarmWindow :alarmData="alarmData"/>
      <el-main>
        <KeepAlive>
        <router-view></router-view>
        </KeepAlive>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import TopNav from './TopNav.vue';
import TopRole from './TopRole.vue';
import alarmWindow from './alarmWindow.vue';
import { EventBus } from '../assets/event-bus';
// import {socket2,establishCommunication2} from '../assets/socket.js'
console.log(document.documentElement.style.fontSize)
console.log(window.innerWidth || document.documentElement.clientWidth)
export default{
  components:{
    TopNav,
    TopRole,
    alarmWindow
  },
  data() {
    return {
      socket1:null,
      socket2:null,
      socket3:null,
      receiveAlarm:[
        // {
        //   alarmNumber:'d3g4h5j6',
        //   productionProcess: '1',
        //   lineNumber: '1',
        //   startAlarmTime: '2025-02-12 08:02:43',
        //   endAlarmTime: '2025-02-12 08:12:43',
        //   alarmDetails: '未确定多轴协调动作中的原点,检查原点是否发生偏移'
        // },
        // {
        //   alarmNumber:'V587',
        //   productionProcess: '2',
        //   lineNumber: '3',
        //   startAlarmTime: '2025-02-12 08:02:43',
        //   endAlarmTime: null,
        //   alarmDetails: '未确定多轴协调动作中的原点,检查原点是否发生偏移'
        // }
      ],
      timerId: null,
      activeMenu: '/',
      alarmSerialNumber:[],
      alarmData:[
        // {
        //   alarmNumber:'d3g4h5j6',
        //   productionProcess: '1',
        //   lineNumber: '1',
        //   startAlarmTime: '2025-02-12 08:02:43',
        //   alarmDetails: '未确定多轴协调动作中的原点,检查原点是否发生偏移'
        // }, 
        // {
        //   alarmNumber:'dfgh',
        //   productionProcess: '1',
        //   lineNumber: '1',
        //   startAlarmTime: '2025-02-12 08:02:43',
        //   alarmDetails: '未确定多轴协调动作中的原点,检查原点是否发生偏移'
        // },
        // {
        //   alarmNumber:'dfgh',
        //   productionProcess: '3',
        //   lineNumber: '1',
        //   startAlarmTime: '2025-02-12 08:02:43',
        //   alarmDetails: '未确定多轴协调动作中的原点,检查原点是否发生偏移'
        // },
        // {
        //   alarmNumber:'dfgh',
        //   productionProcess: '1',
        //   lineNumber: '3',
        //   startAlarmTime: '2025-02-12 08:02:43',
        //   alarmDetails: '未确定多轴协调动作中的原点,检查原点是否发生偏移'
        // },
      ]
    };
  },
  // props: ['activeMenu'],
  mounted(){
    const pagearray=[
      {name:'首页',path:"/index"},
      {name:'烘烤',path:"/bake"},
      {name:'封口焊',path:"/welding"},
      {name:'二次氦检',path:"/detection"},
      {name:'报警信息',path:"/alarmhistory"},
      {name:'报警信息(清洗)',path:"/alarmhistory1"},
      {name:'首页',path:"/index"},
    ]
    pagearray.forEach(item=>{
      const timer = setTimeout(() => {
        this.$router.push(item.path)
      }, 100);
      this.$once('hook:beforeDestroy', () => {
        clearTimeout(timer);
      });
    })
    this.getCurrentAlarm()
    this.initWebSocket1('obtainDeviceStatus'); // 获取设备实时状态数据URL
    this.initWebSocket2('obtainAlarmData'); // 获取实时报警数据URL
    this.initWebSocket3('obtainNoGoodData'); // 获取实时NG数据URL
    this.initWebSocket4('obtainHourData'); // 获取当班生产数据URL
    this.initWebSocket5('obtainDayData'); // 获取近7天生产数据URL
    this.initWebSocket6('queryHistoryStatus'); // 获取近7天生产数据URL
    // this.$store.commit('setSocketData2',this.alarmData)
    // this.$store.dispatch('setAlarm',this.alarmData)
  },
  methods: {
    getCurrentAlarm(){
      this.alarmData=JSON.parse(localStorage.getItem('setCurrentAlarm'))
      if(this.alarmData==null){
        this.alarmData=[]
      }
      console.log('初始化实时报警：',this.alarmData)
    },
    initWebSocket1(value) {
			// WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
			this.socket1 = new WebSocket(`ws://localhost:8091/myapp/ws?page=${value}`); // WebSocket服务器地址
      this.socket1.onopen = () => {
          console.log('socket1 connected');
          // this.startHeartbeat();
      };
      this.reconnect1()
      this.socket1.onmessage = this.setOnmessageMessage1
      this.socket1.onerror = (error) => {
          console.error('socket1 error:', error);
      }
		},
    async setOnmessageMessage1(event) {
      const receivedata=JSON.parse(event.data)
      console.log('监听实时状态：',receivedata);
      //状态管理存储完数据后，调用新vue实例的事件总线，触发事件
      // this.$store.commit('setSocketData1',receivedata)
      if(receivedata.productionProcess=='2'){
        if(receivedata.lineNumber=='1'){
          if(receivedata.deviceName=='4'){
            localStorage.setItem('setBakeLine1Oven1',JSON.stringify(receivedata))
          }
          if(receivedata.deviceName=='5'){
            localStorage.setItem('setBakeLine1Oven2',JSON.stringify(receivedata))
          }
          if(receivedata.deviceName=='6'){
            localStorage.setItem('setBakeLine1CoolingBox',JSON.stringify(receivedata))
          }
          if(receivedata.deviceName=='7'){
            localStorage.setItem('setBakeLine1Oven3',JSON.stringify(receivedata))
          }
          if(receivedata.deviceName=='8'){
            localStorage.setItem('setBakeLine1Oven4',JSON.stringify(receivedata))
          }
        }
        else if(receivedata.lineNumber=='2'){
          if(receivedata.deviceName=='4'){
            localStorage.setItem('setBakeLine2Oven1',JSON.stringify(receivedata))
          }
          if(receivedata.deviceName=='5'){
            localStorage.setItem('setBakeLine2Oven2',JSON.stringify(receivedata))
          }
          if(receivedata.deviceName=='6'){
            localStorage.setItem('setBakeLine2CoolingBox',JSON.stringify(receivedata))
          }
          if(receivedata.deviceName=='7'){
            localStorage.setItem('setBakeLine2Oven3',JSON.stringify(receivedata))
          }
          if(receivedata.deviceName=='8'){
            localStorage.setItem('setBakeLine2Oven4',JSON.stringify(receivedata))
          }
        }
        else{
          if(receivedata.deviceName=='4'){
            localStorage.setItem('setBakeLine3Oven1',JSON.stringify(receivedata))
          }
          if(receivedata.deviceName=='5'){
            localStorage.setItem('setBakeLine3Oven2',JSON.stringify(receivedata))
          }
          if(receivedata.deviceName=='6'){
            localStorage.setItem('setBakeLine3CoolingBox',JSON.stringify(receivedata))
          }
          if(receivedata.deviceName=='7'){
            localStorage.setItem('setBakeLine3Oven3',JSON.stringify(receivedata))
          }
          if(receivedata.deviceName=='8'){
            localStorage.setItem('setBakeLine3Oven4',JSON.stringify(receivedata))
          }
        }
      }
      if(receivedata.productionProcess=='3'){
        if(receivedata.lineNumber=='1'){
          if(receivedata.deviceName=='1'){
            localStorage.setItem('setBakeLine1Load',JSON.stringify(receivedata))
          }
          if(receivedata.deviceName=='2'){
            localStorage.setItem('setBakeLine1Unload',JSON.stringify(receivedata))
          }
          if(receivedata.deviceName=='3'){
            localStorage.setItem('setBakeLine1Dispatch',JSON.stringify(receivedata))
          }
        }
        else if(receivedata.lineNumber=='2'){
          if(receivedata.deviceName=='1'){
            localStorage.setItem('setBakeLine2Load',JSON.stringify(receivedata))
          }
          if(receivedata.deviceName=='2'){
            localStorage.setItem('setBakeLine2Unload',JSON.stringify(receivedata))
          }
          if(receivedata.deviceName=='3'){
            localStorage.setItem('setBakeLine2Dispatch',JSON.stringify(receivedata))
          }
        }
        else{
          if(receivedata.deviceName=='1'){
            localStorage.setItem('setBakeLine3Load',JSON.stringify(receivedata))
          }
          if(receivedata.deviceName=='2'){
            localStorage.setItem('setBakeLine3Unload',JSON.stringify(receivedata))
          }
          if(receivedata.deviceName=='3'){
            localStorage.setItem('setBakeLine3Dispatch',JSON.stringify(receivedata))
          }
        }
      }
      if(receivedata.productionProcess=='4'){
        if(receivedata.lineNumber=='1'){
          localStorage.setItem('setWeldingLine1',JSON.stringify(receivedata))
        }
        else if(receivedata.lineNumber=='2'){
          localStorage.setItem('setWeldingLine2',JSON.stringify(receivedata))
        }
        else{
          localStorage.setItem('setWeldingLine3',JSON.stringify(receivedata))
        }
      }
      if(receivedata.productionProcess=='5'){
        if(receivedata.lineNumber=='1'){
          localStorage.setItem('setDetectionLine1',JSON.stringify(receivedata))
        }
        else if(receivedata.lineNumber=='2'){
          localStorage.setItem('setDetectionLine2',JSON.stringify(receivedata))
        }
        else{
          localStorage.setItem('setDetectionLine3',JSON.stringify(receivedata))
        }
      }
      EventBus.$emit('saveCurrentState')
    },
    reconnect1(){
      setInterval(() => {
        if (this.socket1.readyState === WebSocket.CLOSED) {
            this.socket1.onopen = () => {
                console.log('socket1 reconnected');
                // this.startHeartbeat();
            };
        }
      }, 10000); // 每10秒判断一次socket1连接状态，未连接进行重连
    },
    initWebSocket2(value) {
      // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
      this.socket2 = new WebSocket(`ws://localhost:8091/myapp/ws?page=${value}`); // WebSocket服务器地址
      this.socket2.onopen = () => {
      console.log('socket2 connected');
      // this.startHeartbeat();
      };
      this.reconnect2()
      this.socket2.onmessage = this.setOnmessageMessage2
      this.socket2.onerror = (error) => {
      console.error('socket2 error:', error);
      }
    },
    async setOnmessageMessage2(event) {
      this.receiveAlarm=JSON.parse(event.data)
      console.log('监听实时报警：',this.receiveAlarm)
      if(this.receiveAlarm.length>0){
        this.alarmProcessing()
        localStorage.setItem('setCurrentAlarm',JSON.stringify(this.alarmData))
        //自定义全局监听事件
        window.dispatchEvent(new CustomEvent('onMessageCurrentAlarm', {
          detail: {
            data: this.alarmData
          }
        }))
      }
    },
    reconnect2(){
      setInterval(() => {
      if (this.socket2.readyState === WebSocket.CLOSED) {
      this.socket2.onopen = () => {
      console.log('socket2 reconnected');
      // this.startHeartbeat();
      };
      }
      }, 10000); // 每10秒判断一次socket2连接状态，未连接进行重连
    },
    initWebSocket3(value) {
    // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
    this.socket3 = new WebSocket(`ws://localhost:8091/myapp/ws?page=${value}`); // WebSocket服务器地址
    this.socket3.onopen = () => {
    console.log('socket3 connected');
    // this.startHeartbeat();
    };
    this.reconnect3()
    this.socket3.onmessage = this.setOnmessageMessage3
    this.socket3.onerror = (error) => {
    console.error('socket3 error:', error);
    }
    },
    async setOnmessageMessage3(event) {
    const receivedata=JSON.parse(event.data)
    console.log('监听实时NG：',receivedata);
    if(receivedata.productionProcess=='3'){
      if(receivedata.lineNumber=='1'){
        localStorage.setItem('setBakeLine1CurrentValue',receivedata.actualValue)
      }
    }
    if(receivedata.productionProcess=='3'){
      if(receivedata.lineNumber=='2'){
        localStorage.setItem('setBakeLine2CurrentValue',receivedata.actualValue)
      }
    }
    if(receivedata.productionProcess=='3'){
      if(receivedata.lineNumber=='3'){
        localStorage.setItem('setBakeLine3CurrentValue',receivedata.actualValue)
      }
    }
    if(receivedata.productionProcess=='4'){
      if(receivedata.lineNumber=='1'){
        if(receivedata.noGoodType=='1'){
          localStorage.setItem('setWeldingLine1CurrentValue1',receivedata.actualValue)
        }
      }
    }
    if(receivedata.productionProcess=='4'){
      if(receivedata.lineNumber=='1'){
        if(receivedata.noGoodType=='3'){
          localStorage.setItem('setWeldingLine1CurrentValue2',receivedata.actualValue)
        }
      }
    }
    if(receivedata.productionProcess=='4'){
      if(receivedata.lineNumber=='2'){
        if(receivedata.noGoodType=='1'){
          localStorage.setItem('setWeldingLine2CurrentValue1',receivedata.actualValue)
        }
      }
    }
    if(receivedata.productionProcess=='4'){
      if(receivedata.lineNumber=='2'){
        if(receivedata.noGoodType=='3'){
          localStorage.setItem('setWeldingLine2CurrentValue2',receivedata.actualValue)
        }
      }
    }
    if(receivedata.productionProcess=='4'){
      if(receivedata.lineNumber=='3'){
        if(receivedata.noGoodType=='1'){
          localStorage.setItem('setWeldingLine3CurrentValue1',receivedata.actualValue)
        }
      }
    }
    if(receivedata.productionProcess=='4'){
      if(receivedata.lineNumber=='3'){
        if(receivedata.noGoodType=='3'){
          localStorage.setItem('setWeldingLine3CurrentValue2',receivedata.actualValue)
        }
      }
    }
    if(receivedata.productionProcess=='5'){
      if(receivedata.lineNumber=='1'){
        if(receivedata.noGoodType=='1'){
          localStorage.setItem('setDetectionLine1CurrentValue1',receivedata.actualValue)
        }
      }
    }
    if(receivedata.productionProcess=='5'){
      if(receivedata.lineNumber=='1'){
        if(receivedata.noGoodType=='4'){
          localStorage.setItem('setDetectionLine1CurrentValue2',receivedata.actualValue)
        }
      }
    }
    if(receivedata.productionProcess=='5'){
      if(receivedata.lineNumber=='2'){
        if(receivedata.noGoodType=='1'){
          localStorage.setItem('setDetectionLine2CurrentValue1',receivedata.actualValue)
        }
      }
    }
    if(receivedata.productionProcess=='5'){
      if(receivedata.lineNumber=='2'){
        if(receivedata.noGoodType=='4'){
          localStorage.setItem('setDetectionLine2CurrentValue2',receivedata.actualValue)
        }
      }
    }
    if(receivedata.productionProcess=='5'){
      if(receivedata.lineNumber=='3'){
        if(receivedata.noGoodType=='1'){
          localStorage.setItem('setDetectionLine3CurrentValue1',receivedata.actualValue)
        }
      }
    }
    if(receivedata.productionProcess=='5'){
      if(receivedata.lineNumber=='3'){
        if(receivedata.noGoodType=='4'){
          localStorage.setItem('setDetectionLine3CurrentValue2',receivedata.actualValue)
        }
      }
    }
    // this.$store.commit('setSocketData3',receivedata)
    EventBus.$emit('saveCurrentNg')
    // this.reset();
    },
    reconnect3(){
    setInterval(() => {
    if (this.socket3.readyState === WebSocket.CLOSED) {
    this.socket3.onopen = () => {
    console.log('socket3 reconnected');
    // this.startHeartbeat();
    };
    }
    }, 10000); // 每10秒判断一次socket3连接状态，未连接进行重连
    },
    initWebSocket4(value) {
    // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
    this.socket4 = new WebSocket(`ws://localhost:8091/myapp/ws?page=${value}`); // WebSocket服务器地址
    this.socket4.onopen = () => {
    console.log('socket4 connected');
    // this.startHeartbeat();
    };
    this.reconnect4()
    this.socket4.onmessage = this.setOnmessageMessage4
    this.socket4.onerror = (error) => {
    console.error('socket4 error:', error);
    }
    },
    async setOnmessageMessage4(event) {
    let bakeLine1HourProduction={
      hourHand:[],
      qualifiedNumber:[],
      finePercent:[],
      noGoodNumber:[]
    }
    let bakeLine2HourProduction={
      hourHand:[],
      qualifiedNumber:[],
      finePercent:[],
      noGoodNumber:[]
    }
    let bakeLine3HourProduction={
      hourHand:[],
      qualifiedNumber:[],
      finePercent:[],
      noGoodNumber:[]
    }
    let weldingLine1HourProduction={
      hourHand:[],
      qualifiedNumber:[],
      finePercent:[],
      noGoodNumber:[]
    }
    let weldingLine2HourProduction={
      hourHand:[],
      qualifiedNumber:[],
      finePercent:[],
      noGoodNumber:[]
    }
    let weldingLine3HourProduction={
      hourHand:[],
      qualifiedNumber:[],
      finePercent:[],
      noGoodNumber:[]
    }
    let detectionLine1HourProduction={
      hourHand:[],
      qualifiedNumber:[],
      finePercent:[],
      noGoodNumber:[]
    }
    let detectionLine2HourProduction={
      hourHand:[],
      qualifiedNumber:[],
      finePercent:[],
      noGoodNumber:[]
    }
    let detectionLine3HourProduction={
      hourHand:[],
      qualifiedNumber:[],
      finePercent:[],
      noGoodNumber:[]
    }
    const receivedata=JSON.parse(event.data)
    console.log('监听当班生产数据：',receivedata)
    if(receivedata.length>0){
      receivedata.forEach(item=>{
        if(item.productionProcess=='2'){
          if(item.lineNumber=='1'){
            bakeLine1HourProduction.hourHand.push(item.hourHand)
            bakeLine1HourProduction.qualifiedNumber.push(item.qualifiedNumber)
            bakeLine1HourProduction.noGoodNumber.push(item.noGoodNumber)
            bakeLine1HourProduction.finePercent.push(item.finePercent)
          }
          else if(item.lineNumber=='2'){
            bakeLine2HourProduction.hourHand.push(item.hourHand)
            bakeLine2HourProduction.qualifiedNumber.push(item.qualifiedNumber)
            bakeLine2HourProduction.noGoodNumber.push(item.noGoodNumber)
            bakeLine2HourProduction.finePercent.push(item.finePercent)
          }
          else{
            bakeLine3HourProduction.hourHand.push(item.hourHand)
            bakeLine3HourProduction.qualifiedNumber.push(item.qualifiedNumber)
            bakeLine3HourProduction.noGoodNumber.push(item.noGoodNumber)
            bakeLine3HourProduction.finePercent.push(item.finePercent)
          }
        }
        if(item.productionProcess=='4'){
          if(item.lineNumber=='1'){
            weldingLine1HourProduction.hourHand.push(item.hourHand)
            weldingLine1HourProduction.qualifiedNumber.push(item.qualifiedNumber)
            weldingLine1HourProduction.noGoodNumber.push(item.noGoodNumber)
            weldingLine1HourProduction.finePercent.push(item.finePercent)
          }
          else if(item.lineNumber=='2'){
            weldingLine2HourProduction.hourHand.push(item.hourHand)
            weldingLine2HourProduction.qualifiedNumber.push(item.qualifiedNumber)
            weldingLine2HourProduction.noGoodNumber.push(item.noGoodNumber)
            weldingLine2HourProduction.finePercent.push(item.finePercent)
          }
          else{
            weldingLine3HourProduction.hourHand.push(item.hourHand)
            weldingLine3HourProduction.qualifiedNumber.push(item.qualifiedNumber)
            weldingLine3HourProduction.noGoodNumber.push(item.noGoodNumber)
            weldingLine3HourProduction.finePercent.push(item.finePercent)
          }
        }
        if(item.productionProcess=='5'){
          if(item.lineNumber=='1'){
            detectionLine1HourProduction.hourHand.push(item.hourHand)
            detectionLine1HourProduction.qualifiedNumber.push(item.qualifiedNumber)
            detectionLine1HourProduction.noGoodNumber.push(item.noGoodNumber)
            detectionLine1HourProduction.finePercent.push(item.finePercent)
          }
          else if(item.lineNumber=='2'){
            detectionLine2HourProduction.hourHand.push(item.hourHand)
            detectionLine2HourProduction.qualifiedNumber.push(item.qualifiedNumber)
            detectionLine2HourProduction.noGoodNumber.push(item.noGoodNumber)
            detectionLine2HourProduction.finePercent.push(item.finePercent)
          }
          else{
            detectionLine3HourProduction.hourHand.push(item.hourHand)
            detectionLine3HourProduction.qualifiedNumber.push(item.qualifiedNumber)
            detectionLine3HourProduction.noGoodNumber.push(item.noGoodNumber)
            detectionLine3HourProduction.finePercent.push(item.finePercent)
          }
        }
      })
      if(bakeLine1HourProduction.hourHand.length>0){
        localStorage.setItem('setbakeLine1HourProduction',JSON.stringify(bakeLine1HourProduction))
      }
      if(bakeLine2HourProduction.hourHand.length>0){
        localStorage.setItem('setbakeLine2HourProduction',JSON.stringify(bakeLine2HourProduction))
      }
      if(bakeLine3HourProduction.hourHand.length>0){
        localStorage.setItem('setbakeLine3HourProduction',JSON.stringify(bakeLine3HourProduction))
      }
      if(weldingLine1HourProduction.hourHand.length>0){
        localStorage.setItem('setweldingLine1HourProduction',JSON.stringify(weldingLine1HourProduction))
      }
      if(weldingLine2HourProduction.hourHand.length>0){
        localStorage.setItem('setweldingLine2HourProduction',JSON.stringify(weldingLine2HourProduction))
      }
      if(weldingLine3HourProduction.hourHand.length>0){
        localStorage.setItem('setweldingLine3HourProduction',JSON.stringify(weldingLine3HourProduction))
      }
      if(detectionLine1HourProduction.hourHand.length>0){
        localStorage.setItem('setdetectionLine1HourProduction',JSON.stringify(detectionLine1HourProduction))
      }
      if(detectionLine2HourProduction.hourHand.length>0){
        localStorage.setItem('setdetectionLine2HourProduction',JSON.stringify(detectionLine2HourProduction))
      }
      if(detectionLine3HourProduction.hourHand.length>0){
        localStorage.setItem('setdetectionLine3HourProduction',JSON.stringify(detectionLine3HourProduction))
      }
      EventBus.$emit('saveHourProduction')
    }
    },
    reconnect4(){
    setInterval(() => {
    if (this.socket4.readyState === WebSocket.CLOSED) {
    this.socket4.onopen = () => {
    console.log('socket4 reconnected');
    // this.startHeartbeat();
    };
    }
    }, 10000); // 每10秒判断一次socket4连接状态，未连接进行重连
    },
    initWebSocket5(value) {
    // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
    this.socket5 = new WebSocket(`ws://localhost:8091/myapp/ws?page=${value}`); // WebSocket服务器地址
    this.socket5.onopen = () => {
    console.log('socket5 connected');
    // this.startHeartbeat();
    };
    this.reconnect5()
    this.socket5.onmessage = this.setOnmessageMessage5
    this.socket5.onerror = (error) => {
    console.error('socket5 error:', error);
    }
    },
    async setOnmessageMessage5(event) {
      let dayProduction={
        monthDayDate:[],
        bakeQualifiedNumber:[],
        bakeNoGoodNumber:[],
        bakeFinePercent:[],
        weldingQualifiedNumber:[],
        weldingNoGoodNumber:[],
        weldingFinePercent:[],
        detectionQualifiedNumber:[],
        detectionNoGoodNumber:[],
        detectionFinePercent:[],
        weldingScanNGNumber:[],
        weldingCheckNGNumber:[],
        weldingCleanNGNumber:[],
        weldingNailNGNumber:[],
        weldingHeightNGNumber:[],
        weldingPreWeldNGNumber:[],
        weldingFullWeldNGNumber:[],
        weldingWeldCheckNGNumber:[],
        detectionScanNGNumber:[],
        detectionCheckNGNumber:[]
      }
      const receivedata=JSON.parse(event.data)
      console.log('监听近7天生产数据：',receivedata)
      if(receivedata.length>0){
        receivedata.forEach(item=>{
          if(item.productionProcess=='2'){
            dayProduction.monthDayDate.push(item.monthDayDate)
            dayProduction.bakeQualifiedNumber.push(item.qualifiedNumber)
            dayProduction.bakeNoGoodNumber.push(item.noGoodNumber)
            dayProduction.bakeFinePercent.push(item.finePercent)
          }
          if(item.productionProcess=='4'){
            dayProduction.weldingQualifiedNumber.push(item.qualifiedNumber)
            dayProduction.weldingNoGoodNumber.push(item.noGoodNumber)
            dayProduction.weldingFinePercent.push(item.finePercent)
            dayProduction.weldingScanNGNumber.push(item.scanNGNumber)
            dayProduction.weldingCheckNGNumber.push(item.checkNGNumber)
            dayProduction.weldingCleanNGNumber.push(item.cleanNGNumber)
            dayProduction.weldingNailNGNumber.push(item.nailNGNumber)
            dayProduction.weldingHeightNGNumber.push(item.heightNGNumber)
            dayProduction.weldingPreWeldNGNumber.push(item.preWeldNGNumber)
            dayProduction.weldingFullWeldNGNumber.push(item.fullWeldNGNumber)
            dayProduction.weldingWeldCheckNGNumber.push(item.weldCheckNGNumber)
          }
          if(item.productionProcess=='5'){
            dayProduction.detectionQualifiedNumber.push(item.qualifiedNumber)
            dayProduction.detectionNoGoodNumber.push(item.noGoodNumber)
            dayProduction.detectionFinePercent.push(item.finePercent)
            dayProduction.detectionScanNGNumber.push(item.scanNGNumber)
            dayProduction.detectionCheckNGNumber.push(item.checkNGNumber)
          }
        })
        if(dayProduction.monthDayDate.length>0){
          localStorage.setItem('setDayProduction',JSON.stringify(dayProduction))
        }
        EventBus.$emit('saveDayProduction')
      }
    },
    reconnect5(){
    setInterval(() => {
    if (this.socket5.readyState === WebSocket.CLOSED) {
    this.socket5.onopen = () => {
    console.log('socket5 reconnected');
    // this.startHeartbeat();
    };
    }
    }, 10000); // 每10秒判断一次socket4连接状态，未连接进行重连
    },

    initWebSocket6(value) {
    // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
    this.socket6 = new WebSocket(`ws://localhost:8091/myapp/ws?page=${value}`); // WebSocket服务器地址
    this.socket6.onopen = () => {
    console.log('socket6 connected');
    // this.startHeartbeat();
    };
    this.reconnect6()
    this.socket6.onmessage = this.setOnmessageMessage6
    this.socket6.onerror = (error) => {
    console.error('socket6 error:', error);
    }
    },
    async setOnmessageMessage6(event) {
      let histStatus={
        weldingLine1RunningState:[],
        weldingLine2RunningState:[],
        weldingLine3RunningState:[],
        detectionLine1RunningState:[],
        detectionLine2RunningState:[],
        detectionLine3RunningState:[],
      }
      let receivedata=JSON.parse(event.data)
      console.log('监听历史状态：',receivedata)
      if(receivedata.length>0){
        receivedata.filter(item => item.productionProcess=='4' || item.productionProcess=='5')
        receivedata.map(item => {
          item.startSuchTime=item.startSuchTime.substring(0,10)+' '+item.startSuchTime.substring(11)
          if(item.endSuchTime!=null)
            item.endSuchTime=item.endSuchTime.substring(0,10)+' '+item.endSuchTime.substring(11)
          switch(item.deviceStatus){
            case '1':
              item.deviceStatus='运行'
              break
            case '2':
              item.deviceStatus='待机'
              break
            default:
              item.deviceStatus='停机'
              break
          }
        })
        receivedata.forEach(item=>{
          if(item.productionProcess=='4'){
            if(item.lineNumber=='1'){
              histStatus.weldingLine1RunningState.push(item)
            }
            if(item.lineNumber=='2'){
              histStatus.weldingLine2RunningState.push(item)
            }
            if(item.lineNumber=='3'){
              histStatus.weldingLine3RunningState.push(item)
            }
          }
          if(item.productionProcess=='5'){
            if(item.lineNumber=='1'){
              histStatus.detectionLine1RunningState.push(item)
            }
            if(item.lineNumber=='2'){
              histStatus.detectionLine2RunningState.push(item)
            }
            if(item.lineNumber=='3'){
              histStatus.detectionLine3RunningState.push(item)
            }
          }
        })
      }
      localStorage.setItem('setHistoryStatus',JSON.stringify(histStatus))
      EventBus.$emit('saveHistoryStatus')
    },
    reconnect6(){
    setInterval(() => {
    if (this.socket6.readyState === WebSocket.CLOSED) {
    this.socket6.onopen = () => {
    console.log('socket6 reconnected');
    // this.startHeartbeat();
    };
    }
    }, 10000); // 每10秒判断一次socket4连接状态，未连接进行重连
    },
    updateActiveMenu(path) {
      this.activeMenu = path;    //父组件监听子组件事件，获取路由路径给当前激活菜单
    },
    alarmProcessing(){
      this.alarmSerialNumber=[]
      //删除有报警结束时间的报警并将该条记录添加到报警序列号数组中
      for (let i = this.receiveAlarm.length - 1; i >= 0; i--){
        if(this.receiveAlarm[i].endAlarmTime!==null){
          this.alarmSerialNumber.push(this.receiveAlarm[i].alarmNumber)
          this.receiveAlarm.splice(i,1)
        }
      }
      // console.log(this.alarmSerialNumber)
      // console.log(typeof this.receiveAlarm[0].startAlarmTime)
      //合并原报警和删除报警结束记录的新报警
      if(this.alarmData==null){
        this.alarmData=[]
      }
      this.alarmData.push.apply(this.alarmData,this.receiveAlarm)
      //删除和报警结束时间记录匹配的报警开始时间记录
      this.alarmSerialNumber.forEach((item) => {
        for (let i = this.alarmData.length - 1; i >= 0; i--){
          if(this.alarmData[i].alarmNumber==item){
            this.alarmData.splice(i,1)
          }
        } 
      })
      this.alarmData.forEach(item => {
        item.startAlarmTime=item.startAlarmTime.substring(0,10)+' '+item.startAlarmTime.substring(11,19)
        if(item.productionProcess=='2'){
          item.productionProcess='烘烤工艺'
        }
        if(item.productionProcess=='3'){
          item.productionProcess='烘烤物流'
        }
        if(item.productionProcess=='4'){
          item.productionProcess='封口焊'
        }
        if(item.productionProcess=='5'){
          item.productionProcess='二次氦检'
        }
        if(item.lineNumber=='1'){
          item.lineNumber='1线'
        }
        if(item.lineNumber=='2'){
          item.lineNumber='2线'
        }
        if(item.lineNumber=='3'){
          item.lineNumber='3线'
        }
      })
      console.log('最终实时报警：',this.alarmData)
      return this.alarmData
    }
  }
}
</script>
<style scoped lang="scss">
.el-menu-item, .el-submenu {
// text-indent: 1.25rem; /* 设置文字缩进为20像素 */
// line-height: 12.5rem;
min-width: 11.25rem!important;
font-size: 1rem;
}
// ::v-deep .el-submenu__title{
//   font-size: 1rem;
// }
.el-header{
display: flex;
justify-content: flex-start;
align-items: center;
// background-color: #2b2f3a;
// color: white;
height: 1.875rem!important;
padding: 0 1rem;
}
.el-aside {
background-color: #2b2f3a;
color: white;
// text-align: left;
line-height: 12.5rem;
// display: flex;
// justify-content: left;
}
.rightarea{
  position: relative;
}
.title{
  position: relative;
  width: 100%;
  height: 3.125rem;
  line-height: 3.125rem;
  background: #2b2f3a;
  text-align: center;
  overflow: hidden;
  font-size: 1.125rem;
  font-weight: 600;
}
// .el-divider{
//   margin: 0 0 ;
// }
.a{
  margin: 0 0 .1875rem
}
.b{
  margin: .1875rem 0 0;
}
.el-main {
  padding: 0;
}
// body > .el-container {
// margin-bottom: 2.5rem;
// }

html, body {
margin: 0;
padding: 0;
height: 100%;
}
html{
font-size: 1rem;
}
//   .sum{
//     height: 45.625rem;
//   }

// .el-container:nth-child(5) .el-aside,
// .el-container:nth-child(6) .el-aside {
//   line-height: 16.25rem;
// }

// .el-container:nth-child(7) .el-aside {
//   line-height: 20rem;
// }
// nav {
//   padding: 1.875rem;

//   a {
//     font-weight: bold;
//     color: #2c3e50;

//     &.router-link-exact-active {
//       color: #42b983;
//     }
//   }
// }
</style>